<script>
	var arrInsumos = new Array();
	var firstInsumo = false;
	$(function() {
		var indices = new Array();
		indices[0] = "ots";
		indices[1] = "clientes";
		indices[2] = "insumos";
		/*
		 * Clientes
		 */
		var newCliente = new OnecoreForms({
			formUrl		:utility.makeUrl("clientes/loadFormNuevo"),
			windowModal	:"popup",
			itemName	:"Cliente",
			type		:"add",
			formId		:"fNuevoCliente",
			width		:utility.getWidth(0.6),
			ID			:"newCliente"			
		});
		var editCliente = new OnecoreForms({
			formUrl		:utility.makeUrl("clientes/loadEdit"),
			windowModal	:"popup",
			itemName	:"Cliente",
			type		:"upd",
			formId		:"fEditarCliente",
			width		:utility.getWidth(0.6),
			ID			:"editCliente"
		});
		var delCliente = new OnecoreForms({
			urlAction	:utility.makeUrl("clientes/del"),
			windowModal	:"popup",
			itemName	:"Cliente",
			type		:"del",
			width		:utility.getWidth(0.4),
			ID			:"delCliente"
		});
		
		/*
		 * Insumos
		 */
		var newInsumo = new OnecoreForms({
			formUrl		:utility.makeUrl("insumos/loadFormNuevo"),
			windowModal	:"popup",
			itemName	:"Insumo",
			type		:"add",
			formId		:"fNuevoInsumo",
			width		:utility.getWidth(0.6),
			ID			:"newInsumo"
		});
		var editInsumo = new OnecoreForms({
			formUrl		:utility.makeUrl("insumos/loadEdit"),
			windowModal	:"popup",
			itemName	:"Insumo",
			type		:"upd",
			formId		:"fEditarInsumo",
			width		:utility.getWidth(0.6),
			ID			:"editInsumo"
		});
		var delInsumo = new OnecoreForms({
			urlAction	:utility.makeUrl("insumos/del"),
			windowModal	:"popup",
			itemName	:"Insumo",
			type		:"del",
			width		:utility.getWidth(0.4),
			ID			:"delInsumo"
		});
		
		/*
		 * Ordenes de Trabajo
		 */
		
		//aqui seteamos el cliente en el form de nueva ot
		function setCliente(cliente){
			$("#cNombre").val(cliente.nombres+" "+cliente.apellidos);
			$("#cRut").val(cliente.rut);
			$("#cEmail").val(cliente.email);
			$("#cTelefonos").val(cliente.fono_fijo+cliente.fono_movil);
			$("#cDireccion").val(cliente.direccion);
		}
		//carga el detalle insumo del select
		var detalleInsumo = new OnecoreForms({
			formUrl		:utility.makeUrl("insumos/loadInsumo"),
			afterSuccess:function(data){
				var insumo = data.Insumo;
				$("#iCosto").val(insumo.costo_unitario);
				$("#iStock").val(insumo.stock);
				$("#iLargo").val(insumo.largo);
				$("#iAncho").val(insumo.ancho);
				$("#iAlto").val(insumo.alto);
			}	
		});
		//esta funcion carga la grilla de insumos y todo lo asociado a ella
		function showInsumos(){
			$(".ajaxlink").attr("href","javascript:void(0);");
			$("#ulInsumos").slideDown("fast");
			$("#slInsumos").change(function(){
				detalleInsumo.setAjaxData("id="+$(this).val());
				detalleInsumo.customLoad();
			});
			$("#lnkDetalleInsumo").click(function(){
				var show = $(this).attr("show");
				if(show=="true"){
					$(this).attr("show",false);
					$("#liDetalleInsumo").slideDown("slow");
				}
				else{
					$(this).attr("show",true);
					$("#liDetalleInsumo").slideUp("fast");
				}
			});
			$("#lnkAsignarInsumo").click(function(){
				buscarInsumo.load();
			});
		}		
		
		//usado por la grilla para buscar el cliente seleccionado y asignarlo al form de nueva ot
		var getCliente = new OnecoreForms({
			formUrl		:utility.makeUrl("clientes/get"),
			customSuccess:function(response){
				var cliente = response.data.Cliente;
				setCliente(cliente);
				buscarCliente.closeDialog("popupWindow");
				showInsumos();
			}
		});
		var getInsumo = new OnecoreForms({
			formUrl		:utility.makeUrl("insumos/get"),
			customSuccess:function(response){
				var cantidad = $("#iCantidadInsumo").val();
				if (parseInt(cantidad) && cantidad > 0) {
					var insumo = response.data.Insumo;
					//aqui actualizamos la grilla de insumos usados
					insumo.cantidad = cantidad;
					arrInsumos.push(insumo);
					var total = cantidad * insumo.costo_unitario;
					var btnEliminar = "<a class='ajaxlink lnkRemoverInsumo' itemId='" + insumo.id + "' title='Eliminar'><img src='" + utility.getImagePath("delete-icon.png") + "'/></a>";
					if (!firstInsumo) {
						$("#tbInsumos").html("");
						firstInsumo = true;
					}
					$("#tbInsumos").append("<tr id='"+insumo.id+"'><td>" + insumo.nombre + "</td><td>" + cantidad + "</td><td>" + insumo.costo_unitario + "</td><td>$" + total + "</td><td>" + btnEliminar + "</td></tr>");
					$(".ajaxlink").attr("href", "javascript:void(0);");
					$(".lnkRemoverInsumo").click(function(){
						var id = $(this).attr("itemId");
						var exit = false;
						for(i in arrInsumos){
							if (arrInsumos[i].id == id) {
								arrInsumos.splice(i, 1);
								$("#"+id).fadeOut("slow",function(){
									$("#"+id).remove();
								});
								exit = true;
							}
							if(exit) break;
						}
					});
					buscarInsumo.closeDialog("popupWindow");
				}
			}
		});
		var buscarCliente = new OnecoreForms({
			formUrl		:utility.makeUrl("clientes/loadFormSearch"),
			windowModal	:"popup",
			itemName	:"Clientes",
			type		:"load",
			width		:utility.getWidth(0.8),
			height		:utility.getHeight(0.5),
			ID			:"buscarCliente",
			beforeRender:function(){
				$("#tBuscar").flexigrid({
					url: utility.makeUrl('clientes/loadGrid'),
					dataType: 'json',
					colModel : [
						{display: 'id', name : 'cliente.id', width : 10,hide:true},
						{display: 'Rut', name : 'cliente.rut', width : 50, sortable : true, align: 'left'},
						{display: 'Nombres', name : 'cliente.nombres', width :50, sortable : true, align: 'left'},
						{display: 'Apellidos', name : 'cliente.apellidos', width : 50, sortable : true, align: 'left'},
						{display: 'Dirección', name : 'cliente.direccion', width : 100, sortable : true, align: 'left'},
						{display: 'Fono Fijo', name : 'cliente.fono_fijo', width : 50, sortable : true, align: 'left'},
						{display: 'Fono Móvil', name : 'cliente.fono_movil', width : 50, sortable : true, align: 'left'},
						{display: 'Email', name : 'cliente.email', width : 100, sortable : true, align: 'left'},
						{display: 'Creado', name : 'cliente.created', width : 75, sortable : true, align: 'left'},
						{display: 'Modificado', name : 'cliente.modified', width : 75, sortable : true, align: 'left'}
					],
					searchitems : [
						{display: 'Nombres', name : 'cliente.nombres',isdefault: true},
						{display: 'Apellidos', name : 'cliente.apellidos'},
						{display: 'Rut', name : 'cliente.rut'},
						{display: 'Fono fijo', name : 'cliente.fono_fijo'},
						{display: 'Fono móvil', name : 'cliente.fono_movil'},
						{display: 'Email', name : 'cliente.email'},
						{display: 'Dirección', name : 'cliente.direccion'},
						{display: 'Creado', name : 'cliente.created'},
						{display: 'Modificado', name : 'cliente.modified'}
					],
					sortname: "apellidos",
					sortorder: "asc",
					usepager: true,
					title: 'Clientes de PYMENAME',
					useRp: true,
					rp: 10,
					showTableToggleBtn: true,
					width: pub_get_width(0.7),
					height: pub_get_height(0.2),
					pagestat: '',
					procmsg: 'Procesando, espere...',
					nomsg: 'Sin items',
					singleSelect: false
				});
				$("#btnAsignar").click(function(){
					var id = $("#tBuscar .trSelected div").html();
					getCliente.setAjaxData("id="+id);
					getCliente.customLoad();
				});
			}
		});
		var buscarInsumo = new OnecoreForms({
			formUrl		:utility.makeUrl("insumos/loadFormSearch"),
			windowModal	:"popup",
			itemName	:"Insumos",
			type		:"load",
			width		:utility.getWidth(0.8),
			height		:utility.getHeight(0.5),
			ID			:"buscarInsumos",
			beforeRender:function(){
				$("#tListaInsumos").flexigrid({
					url: utility.makeUrl('insumos/loadGrid'),
					dataType: 'json',
					colModel : [
						{display: 'id', name : 'insumo.id', width : 10,hide:true},
						{display: 'Nombre', name : 'insumo.nombre', width :50, sortable : true, align: 'left'},
						{display: 'Stock', name : 'insumo.stock', width :50, sortable : true, align: 'left'},
						{display: 'Costo Unidad', name : 'insumo.costo_unitario', width : 50, sortable : true, align: 'left'},
						{display: 'Largo', name : 'insumo.largo', width : 100, sortable : true, align: 'left'},
						{display: 'Alto', name : 'insumo.alto', width : 50, sortable : true, align: 'left'},
						{display: 'Ancho', name : 'insumo.ancho', width : 50, sortable : true, align: 'left'},
						{display: 'Peso', name : 'insumo.peso', width : 100, sortable : true, align: 'left'},
						{display: 'Creado', name : 'insumo.created', width : 75, sortable : true, align: 'left'},
						{display: 'Modificado', name : 'insumo.modified', width : 75, sortable : true, align: 'left'}
					],
					sortname: "nombre",
					sortorder: "asc",
					usepager: true,
					title: 'Insumos de PYMENAME',
					useRp: true,
					rp: 10,
					showTableToggleBtn: true,
					width: pub_get_width(0.7),
					height: pub_get_height(0.14),
					pagestat: '',
					procmsg: 'Procesando, espere...',
					nomsg: 'Sin items',
					singleSelect: true
				});
				$("#btnAsignarInsumo").click(function(){
					if (parseInt($("#iCantidadInsumo").val()) && $("#iCantidadInsumo").val() > 0) {
						var id = $("#tListaInsumos .trSelected div").html();
						getInsumo.setAjaxData("id=" + id);
						getInsumo.customLoad();
					}
				});
			}
		});
		var newOt = new OnecoreForms({
			formUrl		:utility.makeUrl("ots/loadFormNuevo"),
			windowModal	:"popup",
			itemName	:"Orden de Trabajo",
			type		:"add",
			formId		:"fNuevoOt",
			width		:utility.getWidth(0.8),
			height		:utility.getHeight(0.2),
			ID			:"newOt",
			beforeRender:function(){
				$(".iCliente").attr("disabled",true);
				$("#btnBuscar").click(function(){
					buscarCliente.load();
				});
				$("#btnNuevo").click(function(){
					newCliente.afterSuccess = function(response){
						var cliente = response.extra.Cliente;
						setCliente(cliente);
						showInsumos();
					};
					newCliente.add();
				});
			}
		});
		
		var editOt = new OnecoreForms({
			formUrl		:utility.makeUrl("ots/loadEdit"),
			windowModal	:"popup",
			itemName	:"Orden de Trabajo",
			type		:"upd",
			formId		:"fEditar",
			width		:utility.getWidth(0.6),
			ID			:"editOt"
		});
		var delOt = new OnecoreForms({
			urlAction	:utility.makeUrl("ots/del"),
			windowModal	:"popup",
			itemName	:"Orden de Trabajo",
			type		:"del",
			width		:utility.getWidth(0.4),
			ID			:"delOt"
		});
		
		$("#aOrdenes").attr("href",utility.makeUrl("ots/grid"));
		$("#aClientes").attr("href",utility.makeUrl("clientes/grid"));
		$("#aInsumos").attr("href",utility.makeUrl("insumos/grid"));
		
		$( "#tabs" ).tabs({
			load: function(event, ui){
				var selected = $( "#tabs" ).tabs( "option", "selected" );
				$(".ajaxlink").attr("href","javascript:void(0);");
				if(selected==1){
					$("#tUsuarios").flexigrid({
						url: utility.makeUrl('clientes/loadGrid'),
						dataType: 'json',
						colModel : [
							{display: 'id', name : 'cliente.id', width : 10,hide:true},
							{display: 'Rut', name : 'cliente.rut', width : 50, sortable : true, align: 'left'},
							{display: 'Nombres', name : 'cliente.nombres', width :50, sortable : true, align: 'left'},
							{display: 'Apellidos', name : 'cliente.apellidos', width : 50, sortable : true, align: 'left'},
							{display: 'Dirección', name : 'cliente.direccion', width : 100, sortable : true, align: 'left'},
							{display: 'Fono Fijo', name : 'cliente.fono_fijo', width : 50, sortable : true, align: 'left'},
							{display: 'Fono Móvil', name : 'cliente.fono_movil', width : 50, sortable : true, align: 'left'},
							{display: 'Email', name : 'cliente.email', width : 100, sortable : true, align: 'left'},
							{display: 'Creado', name : 'cliente.created', width : 75, sortable : true, align: 'left'},
							{display: 'Modificado', name : 'cliente.modified', width : 75, sortable : true, align: 'left'}
						],
						searchitems : [
							{display: 'Nombres', name : 'cliente.nombres',isdefault: true},
							{display: 'Apellidos', name : 'cliente.apellidos'},
							{display: 'Rut', name : 'cliente.rut'},
							{display: 'Fono fijo', name : 'cliente.fono_fijo'},
							{display: 'Fono móvil', name : 'cliente.fono_movil'},
							{display: 'Email', name : 'cliente.email'},
							{display: 'Dirección', name : 'cliente.direccion'},
							{display: 'Creado', name : 'cliente.created'},
							{display: 'Modificado', name : 'cliente.modified'}
						],
						sortname: "apellidos",
						sortorder: "asc",
						usepager: true,
						title: 'Clientes de PYMENAME',
						useRp: true,
						rp: 10,
						showTableToggleBtn: true,
						width: pub_get_width(0.75),
						height: pub_get_height(0.25),
						pagestat: '',
						procmsg: 'Procesando, espere...',
						nomsg: 'Sin items',
						singleSelect: false
					});
					$("#lnkNuevo").click(function(){
						newCliente.afterSuccess = function(){$("#tUsuarios").flexReload();};
						newCliente.add();
					});
					$("#lnkEditar").click(function(){
						id = $("#tUsuarios .trSelected div").html();
						editCliente.afterSuccess = function(){$("#tUsuarios").flexReload();};
						editCliente.upd(id);
					});
					$("#lnkDelete").click(function(){
						id = $("#tUsuarios .trSelected div").html();
						delCliente.afterSuccess = function(){$("#tUsuarios").flexReload();};
						delCliente.del(id);
					});
				}
				else if(selected==2){
					$("#tInsumos").flexigrid({
						url: utility.makeUrl('insumos/loadGrid'),
						dataType: 'json',
						colModel : [
							{display: 'id', name : 'insumo.id', width : 10,hide:true},
							{display: 'Nombre', name : 'insumo.nombre', width :50, sortable : true, align: 'left'},
							{display: 'Stock', name : 'insumo.stock', width :50, sortable : true, align: 'left'},
							{display: 'Costo Unidad', name : 'insumo.costo_unitario', width : 50, sortable : true, align: 'left'},
							{display: 'Largo', name : 'insumo.largo', width : 100, sortable : true, align: 'left'},
							{display: 'Alto', name : 'insumo.alto', width : 50, sortable : true, align: 'left'},
							{display: 'Ancho', name : 'insumo.ancho', width : 50, sortable : true, align: 'left'},
							{display: 'Peso', name : 'insumo.peso', width : 100, sortable : true, align: 'left'},
							{display: 'Creado', name : 'insumo.created', width : 75, sortable : true, align: 'left'},
							{display: 'Modificado', name : 'insumo.modified', width : 75, sortable : true, align: 'left'}
						],
						searchitems : [
							{display: 'Nombre', name : 'insumo.nombre',isdefault: true},
							{display: 'Stock', name : 'insumo.stock'},
							{display: 'Costo Unidad', name : 'insumo.costo_unitario'},
							{display: 'Largo', name : 'insumo.largo'},
							{display: 'Alto', name : 'insumo.alto'},
							{display: 'Ancho', name : 'insumo.ancho'},
							{display: 'Peso', name : 'insumo.peso'},
							{display: 'Creado', name : 'insumo.created'},
							{display: 'Modificado', name : 'insumo.modified'}
						],
						sortname: "nombre",
						sortorder: "asc",
						usepager: true,
						title: 'Insumos de PYMENAME',
						useRp: true,
						rp: 10,
						showTableToggleBtn: true,
						width: pub_get_width(0.75),
						height: pub_get_height(0.25),
						pagestat: '',
						procmsg: 'Procesando, espere...',
						nomsg: 'Sin items',
						singleSelect: false
					});
					$("#lnkNuevoInsumo").click(function(){
						newInsumo.afterSuccess = function(){$("#tInsumos").flexReload();};
						newInsumo.add();
					});
					$("#lnkEditarInsumo").click(function(){
						id = $("#tInsumos .trSelected div").html();
						editInsumo.afterSuccess = function(){$("#tInsumos").flexReload();};
						editInsumo.upd(id);
					});
					$("#lnkDeleteInsumo").click(function(){
						id = $("#tInsumos .trSelected div").html();
						delInsumo.afterSuccess = function(){$("#tInsumos").flexReload();};
						delInsumo.del(id);
					});
				}
				else if(selected==0){
					$("#lnkNuevoOt").click(function(){
						arrInsumos = null;
						arrInsumos = new Array();
						firstInsumo = false;
						newOt.add();
					});
				}
			},
			ajaxOptions: {
				error: function( xhr, status, index, anchor ) {
					$( anchor.hash ).html("Error cachay" );
				},
				dataFilter: function(result){
		            data = $.parseJSON(result);
					response = data.response;
		            return response.data;
		        }
			}
		});
	});
	</script>
<div class="demo" style="width:85%;margin:auto;">
	<div id="tabs">
		<ul>
			<li><a id="aOrdenes">Ordenes de Trabajo</a></li>
			<li><a id="aClientes">Clientes</a></li>
			<li><a id="aInsumos">Insumos</a></li>
		</ul>
	</div>
</div>
